{% block editor_content %}
<div id='view_content'></div>

<form action="" method="post" id="myForm">
  {{ form.content }}
</form>


<script type="text/javascript">
function saveNode() {
	myEditor.toolbar.set('disabled', true);
	myEditor.toolbar.deselectButton('saveButton');
	myEditor.saveHTML();

	new Ajax.Request('.', {
		parameters: $('myForm').serialize(true),
		method: 'post',
	  	onSuccess: function(transport) {
	  }
	});
}
function viewContent() {
	var contentHtml = $('myForm').serialize(true);
	newcontent = contentHtml['content'];
	element = document.getElementById('view_content');
	element.innerHTML = newcontent;
	element.style.display = 'block';
	//alert(newcontent);
	element = document.getElementById('myForm');
	element.style.display = 'none';
}

function editContent() {
	element = document.getElementById('view_content');
	element.style.display = 'none';
	element = document.getElementById('myForm');
	element.style.display = 'block';
}


</script>

<script>
var myEditor = new YAHOO.widget.Editor('id_content', {
    height: '380px',
    width: '950px',
    dompath: true,
    handleSubmit: true,
    animate: true,
    autoHeight: true,

    toolbar: {
		collapse: true,
		titlebar: '',
		draggable: false,
		buttons: [
			{ group: 'textstyle', label: 'Font',
				buttons: [
					{ type: 'select', label: 'Arial', value: 'fontname', disabled: true,
									menu: [
										{ text: 'Arial', checked: true },
										{ text: 'Arial Black' },
										{ text: 'Comic Sans MS' },
										{ text: 'Courier New' },
										{ text: 'Lucida Console' },
										{ text: 'Tahoma' },
										{ text: 'Times New Roman' },
										{ text: 'Trebuchet MS' },
										{ text: 'Verdana' }
									]
								},

					{ type: 'push', label: 'Bold CTRL + SHIFT + B', value: 'bold' },
					{ type: 'push', label: 'Italic CTRL + SHIFT + I', value: 'italic' },
					{ type: 'push', label: 'Underline CTRL + SHIFT + U', value: 'underline' },
					{ type: 'spin', label: '13', value: 'fontsize', range: [ 9, 75 ], disabled: true },
					{ type: 'separator' },
					{ type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
					{ type: 'color', label: 'Background Color', value: 'backcolor', disabled: true }

				]
			},
			{ type: 'separator' },
			{ group: 'indentlist', label: 'Lists',
				buttons: [
					{ type: 'push', label: 'Create an Unordered List', value: 'insertunorderedlist' },
					{ type: 'push', label: 'Create an Ordered List', value: 'insertorderedlist' },
					{ type: 'push', label: 'Indent', value: 'indent', disabled: true },
					{ type: 'push', label: 'Outdent', value: 'outdent', disabled: true }
				]
			},
			{ type: 'separator' },
			{ group: 'insertitem', label: 'Insert',
				buttons: [
					{ type: 'push', label: 'HTML Link CTRL + SHIFT + L', value: 'createlink', disabled: true },
					{ type: 'push', label: 'Insert Image', value: 'insertimage' }
				]
			},
			{ type: 'separator' },
			{ group: 'mybuttons', label: 'Save',
				buttons: [
					{ type: 'push', label: 'Save', value: 'saveButton', disabled: false }
				]
			}
		]
	}
});

myEditor.on('editorContentLoaded', function() {
	resize = new YAHOO.util.Resize(myEditor.get('element_cont').get('element'), {
		handles: ['br'],
		autoRatio: true,
		status: true,
		proxy: true,
		setSize: false //This is where the magic happens
	});
	resize.on('startResize', function() {
		this.hide();
		this.set('disabled', true);
	}, myEditor, true);
	resize.on('resize', function(args) {
		var h = args.height;
		var th = (this.toolbar.get('element').clientHeight + 2); //It has a 1px border..
		var dh = (this.dompath.clientHeight + 1); //It has a 1px top border..
		var newH = (h - th - dh);
		this.set('width', args.width + 'px');
		this.set('height', newH + 'px');
		this.set('disabled', false);
		this.show();
	}, myEditor, true);
});


myEditor.on('toolbarLoaded', function() {

    this.toolbar.on('saveButtonClick', function(o) {
        saveNode();

    }, myEditor, true);

    //Setup the button to be enabled, disabled or selected
    this.on('afterNodeChange', function(o) {
        this.toolbar.set('disabled', false);
    }, this, true);

    this.on ('editorKeyDown', function(o) {
    	var Event = YAHOO.util.Event;
    	// get the event from the Yahoo Event Wrapper
    	var ev = o.ev;
    	//alert("ev.type= " + ev.type + " ev.keyCode= " + ev.keyCode + " ev.ctrlKey= " + ev.ctrlKey);
    	// Ctrl + s is pressed
    	if (ev.ctrlKey && (ev.keyCode == 83)) {
    		//Disable the event chain first
    		Event.stopEvent(ev);
    		saveNode();
    	}
    }, this, true);

}, myEditor, true);


myEditor.render();

</script>

{% endblock %}